<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card>
        <el-form :model="search" ref="form" :inline="false" size="default" class="flex mr-10">
          <el-form-item label="公园名称" class="mr-10">
            <el-select v-model="search.name" placeholder="请选择区域" @change="handleChange">
              <el-option v-for="item in parkName" :key="item.objectId" :label="item.name" :value="item.objectId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" size="large">搜索</el-button>
            <el-button @click="handleDel" size="large">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20" class="mt-3">
    <el-col :span="8">
      <el-card class="mb-3">
        <h1 class="font-800">客流量</h1>
        <div class="box text-center ml-10 pt-10">
          <p>客流量</p>
          <h1 class="font-800 mt-5">{{ Datas.visitor }}人次</h1>
        </div>
      </el-card>
      <el-card class="mb-3">
        <h1 class="font-800">停车位统计</h1>
        <div class="box text-center ml-10 pt-10">
          <p>停放车位数量</p>
          <h1 class="font-800 mt-5">{{ Datas.number }}辆</h1>
        </div>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-col :span="24">
        <el-card class="mb-3">
          <div class="font-800">各时段人流量统计</div>
          <div class="chart" ref="lineRef"></div>
        </el-card>
        <el-card>
          <div class="font-800">各区域人流量统计</div>
          <div class="chart" ref="linRef"></div>
        </el-card>
      </el-col>
    </el-col>
    <el-col :span="6" :offset="0">
      <el-col :span="24" :offset="0">
        <el-card>
          <div class="block mb-4">
            <span class="demonstration mr-5">日期</span>
            <el-date-picker v-model="value1" type="datetime" placeholder="请选择日期" />
          </div>
          <div class="font-800 mb-4">游客行为记录</div>
          <div>
            <video class="video" src="../../assets/e.mp4" controls audioTracks></video>
          </div>
        </el-card>
      </el-col>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref, reactive } from 'vue'
import line from './options/line.ts'
import lin from './options/lin.ts'
import { parkVisitor, getParkItems, parkMap } from '../../api/Park/park.ts'

const value1 = ref('')
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
const lineRef = ref<HTMLDivElement | null>(null)
const linRef = ref<HTMLDivElement | null>(null)

// 搜索
const search = reactive({
  name: ''
})
const objectId = ref('')
const handleChange = (e) => {
  console.log('select', e)
  objectId.value = e
}
const parkName = ref([])
onMounted(() => {
  parkVisitor().then((res) => {
    parkName.value = res.data.results
  })
})
interface mapdataType {
  visitor: number
  number: number
}

let Datas = ref<Array<mapdataType>>([])
const handleSearch = async () => {
  // console.log("id555", objectId.value);
  if (objectId.value) {
    getParkItems(objectId.value).then((res) => {
      Datas.value = res.data
      console.log('9999', Datas.value.visitor)
    })
  } else {
    alert('请选择公园')
  }
}

// 重置
const handleDel = () => {
  search.name = ''
}

const datas = ref([])
// echarts图表
onMounted(async () => {
  //  基于准备好的dom，初始化echarts实例
  // 各时段人流量统计
  var lineChart = echarts.init(lineRef.value)
  lineChart.setOption(line)

  // 各区域人流量统计
  var linChart = echarts.init(linRef.value)
  let res = await parkMap()
  let { results } = res.data
  datas.value = results
  let nameArr = []
  let visitorArr = []
  datas.value.forEach((e) => {
    nameArr.push(e.name)
    visitorArr.push(e.visitor)
  })
  lin.xAxis[0].data = nameArr
  lin.series[0].data = visitorArr
  linChart.setOption(lin)
})
</script>

<style scoped>
.chart {
  height: 160px;
}

.box {
  width: 330px;
  height: 160px;
  border-radius: 50% / 50%;
  background: #ffd900;
  box-sizing: border-box;
}

.box p {
  font-size: 20px;
}

.box h1 {
  font-size: 30px;
}

.visChart {
  width: 150px;
  height: 150px;
}

.video {
  border: 1px solid black;
  height: 280px;
  width: 260px;
  background: rgba(0, 0, 0, 0.6);
}
</style>
